<template>
  <label class="dw-radio" @click="$emit('change', label)">
    <span class="dw-radio-input">
      <input type="radio" :checked="value == label" />
      <span :class="['dw-radio-circle', { checked: value == label }]"></span>
    </span>
    <span :class="['dw-radio-text', { checked: value == label }]">
      <slot />
    </span>
  </label>
</template>

<script>
export default {
  name: "dwRadio",
  model: {
    prop: "value",
    event: "change",
  },
  props: ["value", "label", "disabled"],
  components: {},
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.dw-radio {
  cursor: pointer;
  display: inline-block;
  // 移入的时候按钮背景颜色
  &:hover .dw-radio-circle {
    border-color: @dw-color-primary;
  }
}
// 重新设置按钮样式
.dw-radio-input {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    box-sizing: border-box;
  }
}
// 默认圆圈样式
.dw-radio-circle {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 100px;
  transition: all 0.3s;
  &::after {
    transition: all 0.3s;
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: transparent;
  }
  // 选中状态
  &.checked {
    border-color: @dw-color-primary-active;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    &::after {
      background: @dw-color-primary-active;
    }
  }
}
// 文字
.dw-radio-text {
  padding: 0 8px;
  font-size: 14px;
  color: #666;
  vertical-align: middle;
  &.checked {
    color: @dw-color-primary;
  }
}
</style>
